<template>
  <div class="system-user-dialog-container">
    <el-dialog v-model="state.dialog.isShowDialog" :title="state.dialog.title" width="1500px">
      <el-table v-loading="state.tableData.loading" :data="state.tableData.data" border
                fit
                highlight-current-row
                size="default"
                style="width: 100%"
                @sort-change="handleSortChange">
        <el-table-column label="ID" prop="id" show-overflow-tooltip/>
        <el-table-column label="商品名称" prop="commodityName" show-overflow-tooltip/>
        <el-table-column label="仓库名称" prop="stockTypeName"/>
        <!--        <el-table-column label="初期库存" prop="quantityBefore"/>-->
        <el-table-column label="变更数量" prop="quantity"/>
        <!--        <el-table-column label="期末库存" prop="quantityAfter"/>-->
        <el-table-column label="成本金额" prop="costPrice"/>
        <el-table-column label="操作金额" prop="amount"/>
        <el-table-column label="业务场景" prop="sceneName"/>
        <el-table-column label="变更时间" prop="changeDate" show-overflow-tooltip/>
        <el-table-column label="摘要" prop="summary" show-overflow-tooltip/>
        <el-table-column label="备注" prop="remark"/>
      </el-table>
      <el-pagination v-model:current-page="state.tableData.param.pageNum"
                     v-model:page-size="state.tableData.param.pageSize" :page-sizes="[10, 20, 30]" :pager-count="5"
                     :total="state.tableData.total" background class="mt15"
                     layout="total, sizes, prev, pager, next, jumper"
                     @size-change="onHandleSizeChange" @current-change="onHandleCurrentChange">
      </el-pagination>

      <template #footer>
				<span class="dialog-footer">
					<el-button size="default" @click="onCancel">取 消</el-button>
				</span>
      </template>
    </el-dialog>
  </div>
</template>

<script lang="ts" name="stockDialogRef" setup>
import {nextTick, onMounted, reactive} from 'vue';
import {stockChangeApi} from "/@/api/store/stock/change";
// 定义子组件向父组件传值/事件
const emit = defineEmits(['refresh']);

// 定义变量内容
const state = reactive<any>({
  tableData: {
    data: [],
    total: 0,
    loading: false,
    param: {
      pageNum: 1,
      pageSize: 10,
      params: {
        commodityId: '', // 商品ID
        stockTypeId: '', //仓库ID
      },
    }
  },
  ruleForm: {
    commodityId: '', // 商品ID
    stockTypeId: '', //仓库ID
  },
  dialog: {
    isShowDialog: false,
    type: '',
    title: '',
    submitTxt: '',
  },
  supplierList: [],
});

// 打开弹窗
const openDialog = (type: string, row: RowUserType) => {
  state.dialog.type = type;
  state.dialog.isShowDialog = true;
  if (type === 'info') {
    state.dialog.title = '变更纪录';
    state.dialog.submitTxt = '新 增';
  }
  nextTick(() => {
    state.ruleForm = Object.assign(state.ruleForm, row);
    state.tableData.param.params.commodityId = state.ruleForm.commodityId
    state.tableData.param.params.stockTypeId = state.ruleForm.stockTypeId
    getTableData();
  });
};


const handleSortChange = (data: any) => {
  if (data.order) {
    if (data.order.indexOf('asc') > -1) {
      state.tableData.param.sortOrder = 'asc'
    } else {
      state.tableData.param.sortOrder = 'desc'
    }
    state.tableData.param.sortName = data.prop
  }
  getTableData();
};


// 初始化表格数据
const getTableData = () => {
  state.tableData.loading = true;
  stockChangeApi()
      .getTableData(state.tableData.param)
      .then((res) => {
        state.tableData.data = res.data.records;
        state.tableData.total = res.data.total;
        state.tableData.loading = false;
      })
      .catch(() => {
        state.tableData.loading = false;
      });
};

// 分页改变
const onHandleSizeChange = (val: number) => {
  state.tableData.param.pageSize = val;
  getTableData();
};
// 分页改变
const onHandleCurrentChange = (val: number) => {
  state.tableData.param.pageNum = val;
  getTableData();
};

// 关闭弹窗
const closeDialog = () => {
  state.dialog.isShowDialog = false;
};

// 取消
const onCancel = () => {
  closeDialog();
};


// 页面加载时
onMounted(() => {
});

// 暴露变量
defineExpose({
  openDialog,
});
</script>
